<html> 
    <head> 
     <title>HTML 文档结构 </title> 
     <link rel="stylesheet" href="index.css"/>

    </head> 
    <body>
        <div class="main">
            <div class="row">
                <input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
                <input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
                <input type="button" name="bt" id="button2" value="确认2" />
            </div>
            <div id="todogroup">
               <!-- <div id="todo0"><input type="checkbox" name="todocheck">恰饭<button type="button" onclick="deletByIndex(0)">删除</button></div>
                <div>睡觉</div> -->

            </div>
            <div id="xxx"onmouseenter="enter('xxx')" onmouseleave="leave('xxx')">
            
            
            
            </div> 

            
        </div>     
    </body> 
    <script lang="javascript">

        var intCnt = 0;

        function init(){
            //console.log("xxx"); 
            document.getElementById("button2").onclick = handleClick;          
            //console.log('xxxxx');
        }
        
        function handleClick(e){
            console.log('handleClick');
            console.log(e);

            //document.getElementsByClassName("")
            var temp =getValue();

            document.getElementById("todogroup").innerHTML += "<div class='item' id='todo'" 
            + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>" 
            + temp + "</div><button class='item-del' type='button' onclick='deletByIndex(" 
            + intCnt + ")'>删除</button></div>";
            intCnt++;
            //var temp = document.createElement('div');
            //div.innerText = temp;
            //document.getElementById("todongroup").append(div);
            //document.getElementsByClassName("main")[0].style ="background-color: #333333;";

        }
        function keyup(event){
            
        }

        function getValue(){
            var temp = document.getElementById("inputtext");
            console.log(temp.value);

            return temp.value;
        }
        function deletByIndex(index){
            document.getElementById("todo" + index).remove();
        }

        function enter(id){
            document.getElementById(id).style='background-color:#333'
        }

        function leave(id){
            document.getElementById(id).style='background-color:#fff'
        }


        init();
    </script>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .main{
            /* background-color: aqua;
            width: 200px;
            height: 200px; */

            padding: 8px;
            border: 1px solid #333;
            border-radius: 8px;
        }
        .row{
            display: flex;
        }
        .item{
            display: flex;
            align-items: center;
            margin: 6px;
            padding: 3px;

            background-color: #fff;
        }
        .item:hover{
            background-color: rgb(125, 129, 129);
        }
        .item-value{
            flex-grow: 1;
            color: black;
        }
        .item-del{
            color: aliceblue;

            border: 10px;

            background-color: rgb(106, 134, 151);
        }
        .item:hover .item-del{
            opacity: 1;
        }
        .input{
            padding: 8px;
            outline: none;
            border: 2px solid #7c7979;
        }
        .input:focus{
            box-shadow: 0px 0px 10px #3762d9;
            border: 2px solid #3762d9;
        }
    </style>
</html>